<template>
	<view style="padding-bottom: 200rpx;" >

    <z-nav-bar id="nav" bgColor="#ffffff" title="系统消息"></z-nav-bar>
		<view class="sys-info-box" @tap="goTo(0)">
			<view class="sys-info flex-a-center">
				<view class="messages">
					<image src="http://www.xvopen.com/xiaoV/img1/system-msg.png" mode=""></image>
					<view class="tips">
						11+
					</view>
				</view>
				<view class="right flex-top-between">
					<view class="txt">
						<view class="prefix flex-a-center">
							系统消息
							<view class="identity-blue">
								平台客服
							</view>
						</view>
						<view class="desc text-ellipsis">
							更多通知等待您阅读更多通知等待您阅读更多通知等待您阅读更多通知等待您阅读更多通知等待您阅读
						</view>
					</view>
					<view class="right-top">
						3月28日
					</view>
				</view>
			</view>
		</view>

		<view>
			<view class="sys-info-vessel" v-for="(item,index) in infoList" :key="index">
				<delSlideLeft :isBorderRadius="false" :item="item" :data_transit="{ index: index, item: item }" @delItem="deleteClick(index)">
					<view class="sys-info flex-a-center" @tap="goTo(index,item)">
						<view class="messages">
							<image :src="item.pic" mode=""></image>
							<view class="tips">
								11+
							</view>
						</view>
						<view class="right flex-top-between">
							<view class="txt">
								<view class="prefix flex-a-center">
									系统消息
									<view class="identity-blue">
										平台客服
									</view>
								</view>
								<view class="desc text-ellipsis">
									更多通知等待您阅读更多通知
								</view>
							</view>
							<view class="right-top">
								3月28日
							</view>
						</view>
					</view>
				</delSlideLeft>
			</view>
		</view>

		<view class="bottom-txt-box">
			联系总平台
		</view>
	</view>
</template>

<script setup>
	import { onLoad } from '@dcloudio/uni-app';
	import {ref} from "vue";

	let app = getApp();
//-----------------------------------data------------------

	let infoList = ref([{pic:'http://www.xvopen.com/xiaoV/img1/logo.png'},{},{}])

//---------------------------------------onload------------

	onLoad((e)=>{
		console.log(e,'e')

	})

//-----------------------------------function--------------

	function goTo(index,item){
		if(index=='0'){
			uni.navigateTo({
				url:'/pagesInfo/info_system'
			})
		}
		if(item){
			uni.navigateTo({
				url:'/pagesInfo/chat'
			})
		}
	}
	function deleteClick(index){
		console.log(index)
		infoList.value.splice(index,1)
	}


</script>


<style lang="scss">
	.sys-info-box{
		margin: 16rpx 0 16rpx;
		.sys-info{
			.right{
				border-bottom: none;
			}
		}
	}
	.sys-info{
		width: 750rpx;
		height: 128rpx;
		padding-left: 32rpx;
		background-color: #fff;
		.messages{
			image{
				width: 88rpx;
				height: 88rpx;
				border-radius: 50%;
				background-color: #eee;
			}
			.tips{
				top: 2rpx;
				right: -12rpx;
			}
		}
		.right{
			width: 620rpx;
			height: 128rpx;
			border-bottom: 0.5rpx solid rgba(153, 153, 153, 0.3);
			margin-left: 16rpx;
			padding: 20rpx 32rpx 20rpx 0;
			.txt{
				.prefix{
					font-weight: bold;
					font-size: 32rpx;
					color: #222;
					.identity-red,.identity-blue{
						min-width: 108rpx;
						height: 32rpx;
						line-height: 27rpx;
						text-align: center;
						border: 1rpx solid #AA2F38;
						color: #AA2F38;
						font-size: 24rpx;
						margin-left: 8rpx;
					}
					.identity-blue{
						border: 1rpx solid #1352BE;
						color: #1352BE;
					}
				}
				.desc{
					color: #8D8D8D;
					width: 426rpx;
				}
			}
			.right-top{
				color: #999;
				font-size: 24rpx;
			}
		}
	}
	.sys-info-vessel:last-child {
		.sys-info{
			.right{
				border-bottom: none!important;
			}
		}
	}
	.bottom-txt-box{
		position: fixed;
		bottom: 0;
		left: 0;
		color: #A82116;
		text-align: center;
		width: 750rpx;
		height: 128rpx;
	}
</style>
